<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${system_login_title}</title>
<link rel="shortcut icon" href="$!basePath/framework/img/logo.png">
<link rel="stylesheet" type="text/css" href="$!basePath/framework/css/signin/styles.css">
	<script>
		if(top.window != window){
			top.window.location.href = window.location.href;
		}
	</script>
</head>
<body>
	<div class="wrapper">
		<div class="container">
			<h1>${system_login_title}</h1>
			<form class="form" id="loginForm" action="$!basePath/login/do" method="post">
				<input type="hidden" id="verifycode" name="verifycode">
				<input name="username" type="text" placeholder="用户名">
				<input name="password" type="password"placeholder="密码">
				<button type="submit" id="login-button">#i18n("system.login")</button>
			</form>
			<form class="form" id="verifyForm" style="display:none;" action="$!basePath/login/do" method="post" onsubmit="return verifySubmit()">
				<div>
					<a href="javascript:;" onclick="loadImage()"><img style="height:46px;" /></a>
				</div>
				<input name="verifycode" type="text" placeholder="请输入验证码">
				<button type="submit" id="vc-button">确定</button>
			</form>
		</div>
		<ul class="bg-bubbles">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<script type="text/javascript" src="$!basePath/framework/plugins/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="$!basePath/framework/plugins/jquery.form.js"></script>
	<script type="text/javascript">
	$(function(){
		var title = jQuery.trim($(".wrapper h1").text());
		var r = false;
		$("#loginForm").ajaxForm({
			beforeSubmit:function(arr, form, options){
				var username = form.find("input[name='username']");
				if(username.val() == 0){
			        alert("请输入用户名");
			        username.focus();
					return false;
				}
				var password = form.find("input[name='password']");
				if(password.val() == 0){
					alert("请输入密码");
					password.focus();
					return false;
				}
				loadding("正在登录，请稍后...");
			},
			success : function(data, statusText, xhr, $form) {
				r = true;
				if(data.success == true){
					$(".wrapper h1").text("登陆成功，正在转向首页...");
					window.location.href = "$!redirect_url";
				}else{
					if(data.message == "vc"){
						showVerify();
						return;
					}
					if(data.message == "vc_error"){
						$(".wrapper h1").text("验证码错误");
						setTimeout(function(){
							showVerify();
						}, 1000);
						return;
					}
					$(".wrapper h1").text(data.message);
					setTimeout(function(){
						showSignIn(title);
						$form.find("input[name='username']").focus();
					}, 1000);
					
				}
	    	}
		});
		$("#loginForm button:submit").focus();
	});
	function loadding(tip){
		$(".wrapper h1").text(tip);
		$(".wrapper").addClass("form-success");
		$("#loginForm").hide();
		$("#verifyForm").fadeOut(500);
	}
	function showSignIn(tip){
		$(".wrapper h1").text(tip);
		$(".wrapper").removeClass("form-success");
		$("#loginForm").fadeIn(500);
	}
	function showVerify(){
		$(".wrapper h1").text("二次验证");
		$(".wrapper").removeClass("form-success");
		$("#verifyForm").fadeIn(500);
		$("#verifyForm input[name='verifycode']").focus();
		loadImage();
	}
	function loadImage(){
		$("#verifyForm img").attr("src","$!basePath/open/vc");
		$("#verifyForm input[name='verifycode']").val("");
		$("#loginForm #verifycode").val("");
	}
	function verifySubmit(){
		var vc = $("#verifyForm input[name='verifycode']").val();
		$("#loginForm #verifycode").val(vc);
		$("#loginForm").submit();
		return false;
	}
	</script>
</body>
</html>